<template>
  <div class="app-container">
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wrapper">
        <el-form :inline="true" :model="filterForm" class="demo-form-inline">
          <el-form-item label="项目名称">
            <el-input
              v-model="filterForm.pName"
              clearable
              style="width: 177px"
              placeholder="请输入项目名称"
            />
          </el-form-item>
          <el-form-item label="客户单位">
            <el-input
              clearable
              v-model="filterForm.customer"
              style="width: 177px"
              placeholder="请输入客户单位"
            />

            <!-- <el-select
              @change="handleCustomerChange"
              clearable
              v-model="filterForm.customer"
              placeholder="请选择客户单位"
              style="width: 177px"
            >
              <el-option
                v-for="item in customerUnits"
                :label="item.name"
                :value="item.name"
                :key="item.id"
              ></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="合同编号">
            <el-input
              v-model="filterForm.no"
              clearable
              style="width: 177px"
              placeholder="请输入合同编号"
            />
          </el-form-item>
          <el-form-item label="业务员">
            <el-input
              v-model="filterForm.salesman"
              clearable
              style="width: 177px"
              placeholder="请输入业务员姓名"
            />
          </el-form-item>
          <el-form-item label="项目状态">
            <el-select
              v-model="filterForm.status"
              placeholder="请选择项目状态"
              style="width: 177px"
              clearable
              @change="handleStatusChange"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item style="margin-top: 10px">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-collapse-transition>

    <el-card>
      <!-- <div slot="header"></div> -->
      <div>
        <!-- 顶部操作按钮 -->
        <div class="operation-container">
          <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
            >{{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            />
          </el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="records"
          border
          style="width: 100%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            label="序号"
            width="70"
            type="index"
            align="center"
          />
          <el-table-column prop="no" label="合同编号" width="120" />
          <el-table-column prop="pname" label="项目名称" min-width="200">
            <template slot-scope="scope">
              <el-tooltip
                :content="scope.row.pname || '-'"
                placement="top-start"
                effect="dark"
                :disabled="!scope.row.pname"
              >
                <span class="ellipsis">{{ scope.row.pname || "-" }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="customer" label="客户单位" min-width="180">
            <template slot-scope="scope">
              <el-tooltip
                :content="scope.row.customer || '-'"
                placement="top-start"
                effect="dark"
                :disabled="!scope.row.customer"
              >
                <span class="ellipsis">{{ scope.row.customer || "-" }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="customerType" label="项目类型" width="width" />
          <el-table-column prop="director" label="项目负责人" width="100" />
          <el-table-column
            prop="money"
            label="合同金额"
            width="120"
            align="right"
          >
            <template slot-scope="scope">
              {{ scope.row.money || "0" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              {{ formatCreateTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="isAccount" label="项目状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="getAccountStatusType(scope.row.isAccount)">
                {{ scope.row.isAccount }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="handleView(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row :gutter="10" style="margin-top: 20px" type="flex" justify="end">
          <el-pagination
            background
            :current-page="filterForm.page"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="filterForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </el-card>

    <!-- 查看详情弹框 -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="87%"
      title="查看详情"
      custom-class="full-height-dialog"
    >
      <div class="dialog-content-wrapper">
        <!-- <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template #title> -->
        <div class="collapse-header">
          <h3>北仑区传媒中心经营项目立项</h3>
          <!-- <span class="view-btn">点击查看</span> -->
        </div>
        <!-- </template> -->
        <el-card>
          <!-- <div slot="header"></div> -->
          <div>
            <div class="detail-content">
              <div class="contract-no">合同编号：{{ projectDetail.no }}</div>
              <el-form label-width="100px" class="detail-form">
                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目名称">
                      <el-input v-model="projectDetail.pname" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目采购方式">
                      <el-input v-model="projectDetail.projectFrom" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="客户类型">
                      <el-input v-model="projectDetail.customerType" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户单位">
                      <el-input v-model="projectDetail.customer" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目领域">
                      <el-input v-model="projectDetail.projectArea" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目负责人">
                      <el-input
                        v-model="projectDetail.salesman"
                        style="width: 100%"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="存量类型">
                      <el-input v-model="projectDetail.stockType" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="执行时间">
                      <el-input v-model="projectDetail.duration" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目成本">
                      <el-input
                        v-model="projectDetail.cost"
                        style="width: 100%"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同金额">
                      <el-input v-model="projectDetail.money" disabled>
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="实际收入">
                      <el-input
                        v-model="projectDetail.receiveMoney"
                        style="width: 100%"
                        disabled
                      >
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否到账">
                      <el-input v-model="projectDetail.isAccount" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="到账金额">
                      <el-input v-model="projectDetail.receiveMoney" disabled>
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目奖励">
                      <el-input v-model="projectDetail.manageRate" disabled>
                        <template slot="append">%</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="24">
                    <el-form-item label="内容及要求">
                      <el-input
                        v-model="projectDetail.content"
                        type="textarea"
                        :rows="4"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 20px">
          <!-- <div slot="header"></div> -->
          <div>
            <div class="project-type">
              <div class="type-title">项目类型</div>
              <el-table
                :header-cell-style="{ background: '#f5f7fa' }"
                :data="projectDetail.list || []"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="platform"
                  label="平台产品IP"
                  width="width"
                  align="center"
                />
                <el-table-column
                  prop="department"
                  label="执行事业部"
                  width="200"
                  align="center"
                />
                <el-table-column
                  prop="content"
                  label="执行内容及要求"
                  width="300"
                  align="center"
                />
                <el-table-column prop="attribute" label="属性" align="center" />
                <el-table-column prop="money" label="金额" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.money || "0" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="estimatedCost"
                  label="成本"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.estimatedCost || "0" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="transferCompany"
                  label="划转对象"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.transferCompany || "无" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="transferMoney"
                  label="划转金额"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.transferMoney || "0" }}
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="transferExplain" label="划转说明">
                  <template slot-scope="scope">
                    {{ scope.row.transferExplain || "0" }}
                  </template>
                </el-table-column> -->
              </el-table>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 20px">
          <div style="border: 2px solid #ebeef5">
            <div class="contract-info">
              <div class="info-item">
                <div class="info-label">合同电子版</div>
                <div class="info-content">
                  <a
                    v-if="projectDetail.contractFile"
                    :href="projectDetail.contractFile"
                    class="download-link"
                    @click.prevent="
                      handleFileDownload(projectDetail.contractFile)
                    "
                  >
                    {{ getFileName(projectDetail.contractFile) }}(点击下载文件)
                  </a>
                  <div class="button-group">
                    <el-button
                      type="primary"
                      size="small"
                      @click="handleFileDownload(projectDetail.contractFile)"
                      >下载</el-button
                    >
                    <el-button size="small" @click="handlePreview"
                      >预览</el-button
                    >
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="info-label">负责人备注</div>
                <div class="info-content">
                  {{ projectDetail.remarks || "" }}
                </div>
              </div>

              <div class="info-section">
                <div style="border: 1px solid #ccc">
                  <div class="info-row">
                    <div class="info-col">
                      <div
                        class="info-label"
                        style="width: 180px; color: black; font-weight: bold"
                      >
                        项目立项意见
                      </div>
                      <div class="info-content">
                        {{
                          projectDetail.lsuggest
                            ? projectDetail.luser
                              ? `${projectDetail.luser}：${projectDetail.lsuggest}`
                              : projectDetail.lsuggest
                            : ""
                        }}
                      </div>
                    </div>
                    <!-- <div class="info-col">
                      <div class="info-label">项目立项人</div>
                      <div class="info-content">
                        {{ projectDetail.luser || "" }}
                      </div>
                    </div> -->
                  </div>
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row full-width">
                    <div class="info-label">完成概述</div>
                    <div class="info-content">
                      {{ projectDetail.describe || "" }}
                    </div>
                  </div>

                  <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">结案人</div>
                      <div class="info-content">
                        {{ projectDetail.createName || projectDetail.salesman }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">结案时间</div>
                      <div class="info-content">
                        {{ formatCreateTime(projectDetail.createTime) || "" }}
                      </div>
                    </div>
                  </div>
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row full-width">
                    <div class="info-col">
                      <div class="info-label">融合发展事业部意见</div>
                      <div class="info-content">
                        {{
                          projectDetail.rmSuggest
                            ? `${projectDetail.rmUserName}：${
                                projectDetail.rmSuggest || ""
                              }`
                            : ""
                        }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{ formatCreateTime(projectDetail.rmUserTime) || "" }}
                      </div>
                    </div>
                  </div>

                  <!-- <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">审批人</div>
                      <div class="info-content">
                        {{ projectDetail.rmUserName || "" }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{ formatCreateTime(projectDetail.rmUserTime) || "" }}
                      </div>
                    </div>
                  </div> -->
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row three-cols">
                    <div class="info-col">
                      <div class="info-label">项目成本</div>
                      <div class="info-content">
                        {{ projectDetail.cost || "0" }}元
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">项目税金</div>
                      <div class="info-content">
                        {{ projectDetail.tax || "0" }}元
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">项目收入</div>
                      <div class="info-content">
                        {{ projectDetail.income || "0" }}元
                      </div>
                    </div>
                  </div>

                  <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">项目奖励</div>
                      <div class="info-content">
                        {{ projectDetail.manageMoney || "0" }}元
                      </div>
                    </div>
                    <!-- <div class="info-col">
                    <div class="info-label">融合发展事业部意见</div>
                    <div class="info-content">{{ projectDetail.rmSuggest || "" }}</div>
                  </div> -->
                  </div>
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row full-width">
                    <div class="info-col">
                      <div class="info-label">运营中心意见</div>
                      <div class="info-content">
                        {{
                          projectDetail.rcenterSuggest
                            ? `${projectDetail.rcenterUserName}：${
                                projectDetail.rcenterSuggest || ""
                              }`
                            : ""
                        }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{
                          formatCreateTime(projectDetail.rcenterUserTime) || ""
                        }}
                      </div>
                    </div>
                  </div>

                  <!-- <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">审批人</div>
                      <div class="info-content">
                        {{ projectDetail.rcenterUserName || "" }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{
                          formatCreateTime(projectDetail.rcenterUserTime) || ""
                        }}
                      </div>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <!-- </el-collapse-item>
        </el-collapse> -->

        <!-- 时间线部分（始终显示） -->
        <!-- <el-card style="margin-top: 20px">
          <div>
            <div class="timeline-section">
              <el-timeline>
                <el-timeline-item
                  :timestamp="formatCreateTime(projectDetail.createTime)"
                  placement="top"
                  type="primary"
                >
                  <el-card>
                    <h4>负责人已填报</h4>
                    <p>操作人{{ projectDetail.salesman }}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-card> -->
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailDialogVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { selOldProjectListApi } from "@/api/phase_project";
import { selCustomerUnitListApi } from "@/api/basic-data";
import { selFileUrlApi } from "@/api/uploadFile";
export default {
  name: "FirstPeriod",
  data() {
    return {
      isFilterVisible: false,
      // 一期项目请求参数
      filterForm: {
        page: 1,
        pageSize: 10,
        customer: "",
        no: "",
        pName: "",
        salesman: "",
        status: "",
      },
      records: [], // 表格数据
      total: 0, // 总记录数
      currentPage4: 1,
      detailDialogVisible: false,
      // 客户类型列表参数
      selCustomerTypeListQuery: {
        page: 1,
        pageSize: 10,
        name: "",
      },
      // 单据状态
      statusList: [
        { label: "已驳回", value: -1 },
        { label: "未提交", value: 0 },
        { label: "审批中", value: 1 },
        { label: "已通过", value: 6 },
      ],
      projectDetail: {}, // 查看详情数据
      customerUnits: [], // 客户单位列表
    };
  },
  created() {
    this.getList();
    this.selCustomerUnitList();
  },
  methods: {
    // 客户单位列表查询
    async selCustomerUnitList() {
      const res = await selCustomerUnitListApi(this.selCustomerTypeListQuery);
      console.log(res);
      this.customerUnits = res.records;
    },
    // 获取列表数据
    async getList() {
      this.loading = true;
      try {
        const res = await selOldProjectListApi(this.filterForm);
        this.records = res.records || [];
        this.total = res.total || 0;
      } catch (error) {
        console.error("获取数据失败:", error);
        this.$message.error("获取数据失败");
      } finally {
        this.loading = false;
      }
    },
    // 单据状态选择
    handleStatusChange(val) {
      console.log(val);
      this.getList();
    },
    // 客户单位选择
    handleCustomerChange(val) {
      console.log(val);
      this.getList();
    },
    handleSearch() {
      this.filterForm.page = 1;
      this.getList();
    },
    handleReset() {
      this.filterForm = {
        page: 1,
        pageSize: 10,
        customer: "",
        no: "",
        PName: "",
        salesman: "",
        status: 6,
      };
      this.getList();
    },
    // 查看详情
    handleView(row) {
      console.log("查看详情", row);
      this.projectDetail = row;
      this.detailDialogVisible = true;
    },
    // 格式化创建时间
    formatCreateTime(time) {
      if (!time) return "";
      // 找到第二个冒号的位置并截取字符串
      const secondColonIndex = time.indexOf(":", time.indexOf(":") + 1);
      return time.substring(0, secondColonIndex);
    },
    // 获取文件名
    getFileName(url) {
      if (!url) return "";
      // 截取_后面的部分作为文件名
      console.log(url.split("_").pop());
      return url.split("_").pop();
    },
    // 处理文件下载
    handleFileDownload(url) {
      if (!url) {
        this.$message.warning("文件链接不存在");
        return;
      }

      // 拼接完整的下载地址
      const baseUrl = "http://192.168.11.2:8081";
      const fullUrl = `${baseUrl}${url}`;

      // 获取文件名 - 截取_后面的部分
      const fileName = url.split("_").pop();
      console.log(fullUrl);

      try {
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = fullUrl;
        link.setAttribute("download", fileName); // 使用新的文件名
        document.body.appendChild(link);

        link.click();

        document.body.removeChild(link);
      } catch (error) {
        console.error("下载失败:", error);
        this.$message.error("下载失败，请重试");
      }
    },
    // 处理文件预览
    async handlePreview() {
      if (!this.projectDetail.contractFile) {
        this.$message.warning("文件链接不存在");
        return;
      }
      try {
        // 获取预览链接
        const res = await selFileUrlApi(this.projectDetail.contractFile);
        console.log(res);
        if (res.code === 1 && res.data) {
          // 在新窗口中打开预览链接
          window.open(res.data, "_blank");
        } else {
          this.$message.error(res.msg || "获取预览链接失败");
        }
      } catch (error) {
        console.error("预览失败:", error);
        this.$message.error("预览失败，请重试");
      }
    },
    // 获取到账状态标签类型
    getAccountStatusType(status) {
      const statusMap = {
        已到账: "success",
        部分到账: "warning",
        未到账: "danger",
      };
      return statusMap[status] || "info";
    },
    handleSizeChange(newSize) {
      this.filterForm.pageSize = newSize;
      this.getList();
    },
    handleCurrentChange(newPage) {
      this.filterForm.page = newPage;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

.filter-content {
  padding: 10px 20px;
  border-top: 1px solid #ebeef5;
}

.demo-form-inline .el-form-item {
  margin-bottom: 10px;
  margin-right: 20px;
}

/* 确保输入框宽度合适 */
.demo-form-inline .el-input {
  width: 200px;
}

.search-wrapper {
  margin-bottom: 20px;
}

.el-table {
  margin-top: 20px;
}

.el-tag {
  margin-right: 5px;
}

/* 确保表格内容不会被截断 */
.el-table .cell {
  white-space: nowrap;
}

/* 调整按钮样式 */
.el-button--text {
  padding: 0;
  margin: 0 5px;
}

/* 添加文本省略样式 */
.ellipsis {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 确保tooltip内容可以换行 */
:deep(.el-tooltip__popper) {
  max-width: 50%;
  word-break: break-all;
  line-height: 1.5;
}

.collapse-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #303133;

  .view-btn {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
  }
}

.detail-content {
  background: #fff;
  // border: 2px solid #ebeef5;
  // margin-top: 20px;

  .contract-no {
    color: #1b86ee;
    font-size: 16px;
    margin: 20px;
  }
}

.project-type {
  margin-top: 20px;

  .type-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #409eff;
  }

  :deep(.el-table) {
    th {
      background-color: #f5f7fa;
      color: #606266;
      padding: 8px 0;
      font-weight: normal;
    }

    td {
      padding: 8px;
      color: #606266;
    }

    &::before,
    &::after {
      background-color: #ebeef5;
    }

    .el-table__cell {
      border-color: #ebeef5;
    }
  }

  .contract-info {
    // margin-top: 40px;
    // border: 2px solid #ebeef5;
    border-radius: 4px;

    .info-item {
      display: flex;
      border-bottom: 1px solid #ebeef5;

      &:last-child {
        border-bottom: none;
      }

      .info-label {
        width: 120px;
        padding: 12px;
        background-color: #f5f7fa;
        color: #606266;
        font-size: 14px;
        border-right: 1px solid #ebeef5;
      }

      .info-content {
        flex: 1;
        padding: 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        color: #606266;
        font-size: 14px;

        &:has(.download-link) {
          justify-content: space-between;
        }

        .download-link {
          color: #409eff;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        .button-group {
          .el-button {
            margin-left: 10px;
          }
        }
      }
    }
  }
}

.type-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  // margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}

.contract-upload-section {
  margin: 20px 0;

  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #303133;
  }

  .upload-box {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.section-title {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background-color: #1e6ced;
  border-radius: 2px;
}

.contract-upload-section {
  margin: 20px 0;

  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #303133;
  }

  .upload-box {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.contract-info {
  border-radius: 4px;
  margin-top: 0; // 添加这行来覆盖可能继承的margin
  .info-item {
    display: flex;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      width: 130px;
      padding: 12px;
      background-color: #f5f7fa;
      // color: #606266;
      color: black;
      font-size: 14px;
      border-right: 1px solid #ebeef5;
    }

    .info-content {
      flex: 1;
      padding: 12px;
      min-height: 44px;
      display: flex;
      align-items: center;
      color: #606266;
      font-size: 14px;

      &:has(.download-link) {
        justify-content: space-between;
      }

      .download-link {
        color: #409eff;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      .button-group {
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
}

.info-section {
  // padding: 20px;
  background: #fff;

  .info-row {
    display: flex;
    margin-bottom: 1px;

    &.full-width {
      .info-label {
        width: 180px;
        color: black;
        font-weight: bold;
      }
      .info-content {
        flex: 1;
        color: black;
      }
    }

    &.three-cols {
      .info-col {
        flex: 1;
        margin-right: 1px;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    .info-col {
      display: flex;
      flex: 1;
      margin-right: 1px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .info-label {
    width: 100px;
    // padding: 12px 20px;
    padding: 12px;
    background-color: #f5f7fa;
    color: black;
    font-size: 14px;
    border: 1px solid #ebeef5;
    display: flex;
    align-items: center;
  }

  .info-content {
    padding: 12px 20px;
    min-height: 44px;
    border: 1px solid #ebeef5;
    border-left: none;
    display: flex;
    align-items: center;
    color: black;
    font-size: 14px;
    flex: 1;
  }
}
</style>
